<template>
    <div class="data-table-view">
        <div class="data-table-detail">
            {{tableName}} <el-button size="mini" @click.stop.prevent="copyLink(link)" style="background: #45D1F8;color:#fff;">复制链接</el-button>
            <el-row >
                <el-col :span="6">
                    <el-row class="table-detail-num">
                        <el-col :span="6">行数：100</el-col>
                        <el-col :span="6">列数： 100</el-col>
                        <el-col :span="6">大小： 100</el-col>
                        <el-col :span="6">创建者:100</el-col>
                    </el-row>
                </el-col>
            </el-row>
        </div>
        <el-row class="table-box-detail">
            <el-col :span="3" class="tab-lft">
                查看
               <img src="" alt="">
            </el-col>
            <el-col :span="14" class="tab-center">
                <el-scrollbar class="my-scroll">
                  <el-table
                        :data="tableData"
                        >
                        <el-table-column
                        fixed
                        prop="date"
                        label="日期"
                        min-width="150">
                        </el-table-column>
                          <el-table-column
                        fixed
                        prop="date"
                        label="日期"
                        min-width="150">
                        </el-table-column>
                          <el-table-column
                        fixed
                        prop="date"
                        label="日期"
                        min-width="150">
                        </el-table-column>
                          <el-table-column
                        fixed
                        prop="date"
                        label="日期"
                        min-width="150">
                        </el-table-column>
                          <el-table-column
                        fixed
                        prop="date"
                        label="日期"
                        min-width="150">
                        </el-table-column>
                              <el-table-column
                        fixed
                        prop="date"
                        label="日期"
                        min-width="150">
                        </el-table-column>
                    </el-table>
                    </el-scrollbar>
            </el-col>
            <el-col :span="7" class="zd-detail">
                <div class="details">
                     <div class="tables-titles">
                         字段描述信息
                     </div>
                         <el-row :key="item.value" class="field-detail-item" v-for="item in fieldDetailArray">
                            <el-col :span="12">{{item.label}}</el-col>
                            <el-col :span="12">{{item.value}}</el-col>
                         </el-row>
                </div>
                <div class="details">
                     <div class="tables-titles">
                         可视化效果图
                     </div>
                     <div class="charts-box">
                         <ve-histogram :data="chartData" :settings="settings"  :extend="extend1" style="width：100%"></ve-histogram>
                     </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { VeHistogram } from 'v-charts'
export default {
    name: 'DataCheck',
    components: { VeHistogram },
    data () {
        this.extend1 = {
            legend: {
                show: false
            }
        }
        this.settings = {
            itemStyle: {
                color: '#7FCFFF'
            }
        }
        return {
            tableName: '数据表名',
            link: '',
            tableId: '',
            fieldDetailArray: [
                {
                    label: '中数值',
                    value: '1'
                },
                {
                    label: '中数值',
                    value: '2'
                },
                {
                    label: '中数值',
                    value: '3'
                },
                {
                    label: '中数值',
                    value: '4'
                }
            ],
            tableData: [
                {
                    date: '10'
                },
                {
                    date: '10'
                },
                {
                    date: '10'
                },
                {
                    date: '10'
                },
                {
                    date: '10'
                },
                {
                    date: '10'
                },
                {
                    date: '10'
                },
                {
                    date: '10'
                },
                {
                    date: '10'
                }

            ],
            chartData: {
                columns: ['日期', '访问用户'],
                rows: [
                    { '日期': '1/1', '访问用户': 1393 },
                    { '日期': '1/2', '访问用户': 3530 },
                    { '日期': '1/3', '访问用户': 2923 },
                    { '日期': '1/4', '访问用户': 1723 },
                    { '日期': '1/5', '访问用户': 3792 },
                    { '日期': '1/6', '访问用户': 4593 }
                ]
            }
        }
    },
    methods: {
        copyLink (shareLink) {
            var input = document.createElement('input')
            input.value = shareLink
            document.body.appendChild(input)
            input.select()
            document.execCommand('Copy')
            document.body.removeChild(input)
            this.$message({
                message: '复制成功',
                type: 'success'
            })
        }
    },
    mounted () {
        this.tableId = this.$route.params.id ? this.$route.params.id : ''
        this.link = location.href
    }
}
</script>
<style lang="less">
.data-table-view{
    .data-table-detail {
        font-size: 24px;
        .el-row {
            margin: 15px 0;
        }
    }
    .table-box-detail {
        background: #fff;
        padding: 35px 0 30px 0;
        .tab-lft{
            text-align: center;
            padding: 25px 20px;
        }
    }
    .zd-detail {
        padding: 0 42px;
        .details {
            .tables-titles{
                font-size: 16px;
                color: #707070;
                border-bottom: 1px solid #7FCFFF;
                padding: 4px 0;
            }
            .field-detail-item {
                width: 100%;
                margin-top: 20px;
                padding: 0 20%;
                .el-col {
                    text-align: center;
                    font-size: 16px;
                    color: #707070;
                }
            }
        }
    }
    .table-detail-num{
        font-size: 14px;
        color: #45D1F8;
    }
    .charts-box {
        min-height: 210px;
        width: 100%;
        box-sizing: border-box;
        padding: 0px 40px 0 40px;
        overflow: hidden;
    }
}
</style>
